<template>
	<div>
		<div class="main">
			<div class="tab-wrapper">
				<div class="tab-item zero">
					<div class="l-img">
						<div class="l-border">
							<el-image
								style="width: 48px; height: 48px"
								:src="countImg"
							></el-image>
						</div>
					</div>
					<div class="r-text">
						<div class="tab">{{ countItem.zzlCount }}</div>
						<div class="title">族总量</div>
					</div>
				</div>
				<div class="tab-item one">
					<div class="l-img">
						<div class="l-border">
							<el-image
								style="width: 48px; height: 48px"
								:src="lookImg"
							></el-image>
						</div>
					</div>
					<div class="r-text">
						<div class="tab">{{ countItem.lookCount }}</div>
						<div class="title">查看量</div>
					</div>
				</div>
				<div class="tab-item two">
					<div class="l-img">
						<div class="l-border">
							<el-image
								style="width: 48px; height: 48px"
								:src="uploadImg"
							></el-image>
						</div>
					</div>
					<div class="r-text">
						<div class="tab">{{ countItem.uploadCount }}</div>
						<div class="title">上传量</div>
					</div>
				</div>
				<div class="tab-item three">
					<div class="l-img">
						<div class="l-border">
							<el-image
								style="width: 48px; height: 48px"
								:src="downloadImg"
							></el-image>
						</div>
					</div>
					<div class="r-text">
						<div class="tab">{{ countItem.downloadCount }}</div>
						<div class="title">下载量</div>
					</div>
				</div>
				<div class="tab-item four">
					<div class="l-img">
						<div class="l-border">
							<el-image
								style="width: 48px; height: 48px"
								:src="scImg"
							></el-image>
						</div>
					</div>
					<div class="r-text">
						<div class="tab">{{ countItem.collectCount }}</div>
						<div class="title">收藏量</div>
					</div>
				</div>
			</div>
			<div class="list">
				<div class="list-title">
					<div class="list-title-left">
						<el-image style="width: 24px; height: 24px" :src="yjImg"></el-image>
						<label>高频元件</label>
						<!-- <div class="searchContent">
              <el-input
                v-model="versionOrName"
                placeholder="请输入版本或名称"
                size="mini"
                style="width: 150px; margin-right: 10px"
                clearable
              ></el-input>
              <custom-button
                type="search"
                @searchClick="searchClick"
              ></custom-button>
            </div> -->
					</div>
					<div class="list-title-right">
						<el-button-group>
							<el-button
								:type="btnSelect == 3 ? 'primary' : 'default'"
								size="small"
								@click="btnClick(3)"
								>下载量</el-button
							>
							<el-button
								:type="btnSelect == 2 ? 'primary' : 'default'"
								size="small"
								@click="btnClick(2)"
								>收藏量</el-button
							>
							<el-button
								:type="btnSelect == 1 ? 'primary' : 'default'"
								size="small"
								@click="btnClick(1)"
								>查看量</el-button
							>
						</el-button-group>
					</div>
				</div>
			</div>
			<div class="gjw-list">
				<div v-if="listData.length == 0" class="noData">暂无数据</div>
				<div class="gjw-list-list" v-else>
					<div class="gjw-list-item">
						<div
							class="item"
							v-for="(item, index) in listData"
							v-bind:key="index"
							@mouseover="itemOver(item)"
							@mouseleave="itemLevel"
						>
							<div class="item-img" @click="showDetail(item)">
								<el-image style="height: 120px" :src="item.imgSrc"></el-image>
							</div>
							<div class="item-button" v-show="!item.show">&nbsp;</div>
							<div class="item-button" v-show="item.show">
								<el-button
									type="primary"
									icon="el-icon-download"
									size="small"
									@click="downItem(item)"
									>下载</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-off"
									size="small"
									v-if="item.isSc == 0"
									@click="itemSc(item)"
									>收藏</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-on"
									size="small"
									v-if="item.isSc == 1"
									@click="itemSc(item)"
									>取消收藏</el-button
								>
							</div>
							<div class="item-title">
								<el-tooltip :content="item.name" placement="top">
									<label>{{ item.name }}</label>
								</el-tooltip>
							</div>
							<el-row class="item-row">
								<el-col :span="24" style="text-align: left; padding-left: 10px"
									>格式：{{ item.gs }}</el-col
								>
								<!-- <el-col
											:span="12"
											style="text-align: right; padding-right: 10px"
											>版本：{{ item.bb }}</el-col
										> -->
							</el-row>
						</div>
					</div>
				</div>
				<!-- <div class="gjw-list-page">
          <el-pagination
            background
            :layout="
              hasIsSizes
                ? 'prev, pager, next,total,sizes'
                : 'prev, pager, next,total'
            "
            :total="count"
            :page-size="size"
            :current-page="current"
            @current-change="pageChange"
            :page-sizes="[20, 50, 100, 200, 500]"
            @size-change="handleSizeChange"
          >
            >
          </el-pagination>
        </div> -->
			</div>
		</div>

		<div v-if="dialogShow">
			<custom-dialog
				:title="dialogTitle"
				size="large"
				@dialogClose="dialogClose"
			>
				<div class="detail-dialog">
					<div class="detail-dialog-title">
						<el-row>
							<el-col :span="16">
								<!-- <div class="detail-name" style="color: brown">
                  {{ tableName }}
                </div> -->
								<div class="detail-name">{{ curItem.name }}</div>
								<div class="detail-update">
									上传时间：{{
										curItem.updateTime
									}}&nbsp;&nbsp;&nbsp;&nbsp;上传人：{{ curItem.username }}
								</div>
							</el-col>
							<el-col :span="8" style="text-align: right">
								<!-- <el-button
                  type="primary"
                  icon="el-icon-s-tools"
                  size="small"
                  @click="bindBq(curItem)"
                  >标签绑定</el-button
                > -->
								<el-button
									type="primary"
									icon="el-icon-download"
									size="small"
									@click="downItem(curItem)"
									>下载</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-off"
									size="small"
									v-if="curItem.isSc == 0"
									@click="itemSc(curItem)"
									>收藏</el-button
								>
								<el-button
									type="default"
									icon="el-icon-star-on"
									size="small"
									v-if="curItem.isSc == 1"
									@click="itemSc(curItem)"
									>取消收藏</el-button
								>
							</el-col>
						</el-row>

						<el-row style="margin: 20px 0">
							<el-col :span="16">
								<div class="detail-wrapper">
									<el-tabs v-model="activeName" @tab-click="handleClick">
										<el-tab-pane label="缩略图" name="first">
											<div class="img-list">
												<div class="img-list-left-arrow" @click="imgLeftClick">
													<i class="el-icon el-icon-arrow-left"></i>
												</div>
												<div class="img-list-left-img">
													<el-image
														style="height: 400px; margin-top: 50px"
														:src="imgList[imgIndex]"
													></el-image>
												</div>
												<div
													class="img-list-right-arrow"
													@click="imgRightClick"
												>
													<i class="el-icon el-icon-arrow-right"></i>
												</div>
											</div>
											<div class="img-list-li">
												<ul>
													<li
														v-for="(item, index) in imgList"
														v-bind:key="index"
														:class="imgIndex == index ? 'hover' : ''"
													></li>
												</ul>
											</div>
										</el-tab-pane>
										<el-tab-pane label="3D" name="second">3D</el-tab-pane>
									</el-tabs>
								</div>
							</el-col>
							<el-col :span="8" style="float: right">
								<div class="detail-wrapper">
									<div class="detail-wrapper-type">
										<label>类型：</label>
										<el-select
											v-model="typeValue"
											placeholder="请选择类型"
											size="small"
											style="width: 290px"
											@change="typeChange(e)"
										>
											<el-option
												v-for="(item, index) in propertys"
												v-bind:key="index"
												:label="item.FamilyTypeName"
												:value="index"
											>
											</el-option>
										</el-select>
									</div>

									<div class="collapseType">
										<!-- <el-collapse v-model="activeCollapse">
                      <el-collapse-item
                        :title="item.FamilyTypeName"
                        :name="index"
                        class="typeItem"
                        v-for="(item, index) in propertys"
                        v-bind:key="index"
                      >
                        <div
                          class="collapseType-item"
                          v-for="(child, cindex) in item.FamilyParameters"
                          v-bind:key="cindex"
                        >
                          <div class="collapseType-item-left">
                            {{ child.ParamKey }}：
                          </div>
                          <div class="collapseType-item-right">
                            {{ child.ParamVal }}
                          </div>
                        </div>
                      </el-collapse-item>
                    </el-collapse> -->
										<div
											class="collapseType-item"
											v-for="(child, cindex) in propertysValue"
											v-bind:key="cindex"
										>
											<div class="collapseType-item-left">
												{{ child.ParamKey }}：
											</div>
											<div class="collapseType-item-right">
												{{ child.ParamVal }}
											</div>
										</div>
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
			</custom-dialog>
		</div>
	</div>
</template>

<script>
	import Download from "@/assets/images/index/download.png"
	import Look from "@/assets/images/index/look.png"
	import Count from "@/assets/images/index/count.png"
	import SC from "@/assets/images/index/sc.png"
	import Upload from "@/assets/images/index/upload.png"
	import YJ from "@/assets/images/index/yj.png"
	import SMJ from "@/assets/images/smj/smj.jpg"
	import customDialog from "@/components/customComponents/customDialog"
	// import customButton from "@/components/customComponents/customForm/customButton";
	import { PopupCommon } from "@/libs/popupCommon"
	import { AjaxCommon, ImageAddress } from "@/libs/apiCommon"
	import { SessionCommon } from "@/libs/sessionCommon"
	export default {
		components: {
			// customButton,
			customDialog,
		},
		data() {
			return {
				inter: null,
				typeValue: "",
				typeOptions: [
					{
						value: "1",
						label: "标准1",
					},
					{
						value: "2",
						label: "标准2",
					},
				],
				activeCollapse: ["1"],
				imgIndex: 0,
				imgList: [],
				activeName: "first",
				dialogTitle: "元件详情",
				dialogShow: false,
				hasIsSizes: true,
				lookImg: Look,
				countImg: Count,
				uploadImg: Upload,
				downloadImg: Download,
				scImg: SC,
				yjImg: YJ,
				btnSelect: 3,
				versionOrName: "",
				smjImg: SMJ,

				count: 2,
				size: 20,
				current: 1,
				listData: [
					// {
					//   id: 1,
					//   imgSrc: SMJ,
					//   name: "笔记本电脑1笔记本电脑1笔记本电脑1笔记本电脑1笔",
					//   downloadUrl: "https://www.baidu.com",
					//   // 是否收藏，1收藏了，0未收藏
					//   isSc: 1,
					//   gs: "rfa",
					//   bb: "version1",
					//   // 显示按钮
					//   show: false,
					//   username: "张三",
					//   updateTime: "2024-12-12 11:11:11",
					// },
					// {
					//   id: 2,
					//   imgSrc: SMJ2,
					//   name: "笔记本电脑2",
					//   downloadUrl: "https://www.baidu.com",
					//   // 是否收藏，1收藏了，0未收藏
					//   isSc: 0,
					//   gs: "rfa1",
					//   bb: "version2",
					//   show: false,
					//   username: "李四",
					//   updateTime: "2024-12-12 12:12:12",
					// },
				],
				curItem: null,
				countItem: {
					lookCount: 0,
					uploadCount: 0,
					downloadCount: 0,
					collectCount: 0,
				},
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.getAllCount()
				this.initTable()
			})
		},
		destroyed() {},
		methods: {
			stringToArrayBuffer(str) {
				console.log(str, "str....................")
				var buf = new ArrayBuffer(str.length)
				var bufView = new Uint8Array(buf)
				for (var i = 0, strLen = str.length; i < strLen; i++) {
					bufView[i] = str.charCodeAt(i)
				}
				return buf
			},
			downItem(item) {
				this.oprRecord(3, item)
				let self = this
				AjaxCommon(
					"/api/familyresouce/downloadfile/" + item.Id,
					"get",
					null
				).then((res) => {
					if (res.status == 200) {
						var data = self.stringToArrayBuffer(res.data)
						var blob = new Blob([data])
						const href = URL.createObjectURL(blob)
						const link = document.createElement("a")
						link.download = item.FamilyName
						link.href = href
						link.click()
						try {
							document.body.removeChild(link)
						} catch (error) {
							console.log(error.message)
						}
						URL.revokeObjectURL(href) // 释放内存
					} else {
						PopupCommon.notify("error", res.data.msg)
					}
				})
			},
			getAllCount() {
				// /api/FamilyFileOprateController  1：查看 2：收藏 3：下载
				Promise.all([
					AjaxCommon(
						`/api/FamilyFileOprateController?oprateType=1`,
						"get",
						null
					),
					AjaxCommon(`/api/familyresouce/GetUploadCount`, "get", null),
					AjaxCommon(
						`/api/FamilyFileOprateController?oprateType=3`,
						"get",
						null
					),
					AjaxCommon(
						`/api/FamilyFileOprateController?oprateType=2`,
						"get",
						null
					),
					AjaxCommon(`/api/familyresouce/GetUploadCount`, "get", null),
				]).then((res) => {
					console.log(res, "res.......")

					this.countItem = {
						lookCount: res[0].data.response,
						uploadCount: res[1].data.response,
						downloadCount: res[2].data.response,
						collectCount: res[3].data.response,
						zzlCount: res[4].data.response,
					}
				})
			},
			imgLeftClick() {
				if (this.imgIndex != 0) {
					this.imgIndex--
				} else {
					this.imgIndex = this.imgList.length - 1
				}
				console.log(this.imgIndex, this.imgList)
			},
			imgRightClick() {
				if (this.imgIndex != this.imgList.length - 1) {
					this.imgIndex++
				} else {
					this.imgIndex = 0
				}
			},
			/* 查看:1收藏:2下载:3 */
			oprRecord(type, item) {
				var userId = SessionCommon.getCurUserId()
				var params = {
					UserID: userId,
					FileID: item.Id,
					OprateType: type,
					OprateTime: "",
				}
				console.log(params)
				AjaxCommon("/api/FamilyFileOprateController", "putForm", params).then(
					(res) => {
						console.log(res, params)
					}
				)
			},
			handleClick(tab, event) {
				console.log(tab, event)
			},
			dialogClose() {
				clearInterval(this.inter)
				this.dialogShow = false
			},
			btnClick(index) {
				this.btnSelect = index
				this.initTable()
			},
			// 调用收藏
			async initSc() {
				const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get")
				var data = res.data.response
				if (data && data.length > 0) {
					return data
				}
				return []
			},
			async initTable() {
				var index = this.btnSelect
				const scList = await this.initSc()
				var imageAddress = ImageAddress
				console.log(index)
				var params = `?Type=${index}&count=100`
				AjaxCommon(
					"/api/FamilyFileOprateController/GetFamilyResouceByOprate" + params,
					"get",
					null
				).then((res) => {
					console.log(res, params)
					var data = res.data.response
					if (data && data.length > 0) {
						self.imgList = []
						self.imgIndex = 0
						data.map((t) => {
							t.id = t.Id
							t.imgSrc = imageAddress + "/" + t.PreImage
							t.name = t.FamilyName
							t.show = false
							t.username = t.UploadUser
							t.updateTime = t.UploadTime
							t.isSc =
								scList.length > 0 &&
								scList.filter((cc) => cc.Id == t.Id).length > 0
									? 1
									: 0
							t.gs = "rfa"
							t.bb = "版本1"

							var imgList = t.MulViewImages
							var newImgList = []
							if (imgList) {
								imgList = JSON.parse(imgList)
								if (imgList && imgList.length > 0) {
									imgList.map((b) => {
										b = imageAddress + "/" + b
										newImgList.push(b)
										return b
									})
								}
								console.log(imgList, "imgList.....")
								t.MulViewImages = newImgList
							} else {
								t.MulViewImages = []
							}
							return t
						})
					}
					this.listData = data
				})
			},
			searchClick() {
				console.log(this.versionOrName)
			},
			itemOver(item) {
				this.listData.map((t) => {
					t.show = t.id == item.id
				})
			},
			itemLevel() {
				this.listData.map((t) => {
					t.show = false
				})
			},
			itemSc(item) {
				if (item.isSc == 1) {
					item.isSc = 0
				} else {
					item.isSc = 1
					this.oprRecord(2, item)
				}
				AjaxCommon("/api/favorite/favoritefamily?id=" + item.Id, "put", null)
			},
			showDetail(item) {
				this.oprRecord(1, item)
				this.curItem = item
				try {
					this.propertys = JSON.parse(JSON.parse(item.Propertys))
					this.propertysValue = this.propertys[0].FamilyParameters
				} catch (error) {
					this.propertys = []
					this.propertysValue = []
				}
				this.imgIndex = 0
				this.typeValue = 0
				this.imgList = item.MulViewImages
				this.initScroll()
				this.dialogShow = true
			},
			initScroll() {
				setTimeout(() => {
					this.inter = setInterval(() => {
						this.imgRightClick()
					}, 5000)
				}, 2000)
			},
			// 页码点击事件,p当前页
			pageChange(p) {
				// this.$emit("pageChange", p)
				console.log(p)
			},
			handleSizeChange(e) {
				// this.$emit("handleSizeChange", e)
				console.log(e)
			},
		},
	}
</script>

<style scoped>
	.main {
		margin: 10px 0;
	}
	.img-list {
		height: 480px;
		width: 100%;
		position: relative;
		text-align: center;
	}
	.img-list-left-arrow {
		font-size: 12px;
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: #f5f5fa;
		top: 230px;
		left: 0;
		z-index: 1;
		cursor: pointer;
	}
	.img-list-left-arrow i,
	.img-list-right-arrow i {
		font-size: 26px;
		margin-top: 7px;
		cursor: pointer;
	}
	.img-list-right-arrow {
		font-size: 12px;
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: #f5f5fa;
		top: 230px;
		right: 0;
		z-index: 1;
		cursor: pointer;
	}
	.img-list-left-img {
		font-size: 12px;
	}
	.img-list-li {
		text-align: center;
		padding-bottom: 10px;
	}
	.img-list-li ul {
		display: inline-block;
		list-style: none;
	}
	.img-list-li ul li {
		font-size: 12px;
		width: 14px;
		height: 14px;
		border-radius: 14px;
		background-color: #e1e1eb;
		float: left;
		margin-right: 20px;
	}
	.img-list-li ul li.hover {
		background-color: #8992a0 !important;
	}
	.detail-name {
		font-weight: bold;
		color: #333;
		font-size: 16px;
		margin-bottom: 8px;
	}
	.detail-update {
		color: #666;
		font-size: 16px;
	}
	.detail-wrapper {
		box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
		width: 96%;
		padding: 10px;
		height: 580px;
	}
	.detail-wrapper-type {
		height: 40px;
		line-height: 40px;
		border-bottom: 2px solid #e4e7ed;
	}
	.collapseType {
		margin-top: 10px;
		overflow-y: auto;
		height: 535px;
	}
	.collapseType-item {
		padding: 0px 10px;
		display: flex;
	}
	.collapseType-item .collapseType-item-left {
		width: 50%;
		text-align: right;
		font-size: 16px;
		line-height: 32px;
		color: #333;
	}

	.collapseType-item .collapseType-item-right {
		width: 50%;
		text-align: left;
		font-size: 13px;
		line-height: 32px;
		color: #666;
	}
	.typeItem > div {
		background-color: #f5f5fa;
	}

	.list {
		margin: 10px 0;
		padding: 10px;
		background-color: #fff;
	}
	.list-title {
		display: flex;
	}
	.list-title .list-title-left {
		width: 400px;
		text-align: left;
		height: 32px;
		line-height: 32px;
	}
	.list-title .list-title-left .searchContent {
		display: inline-block;
		margin-left: 30px;
	}
	.list-title .list-title-left .el-image {
		display: block;
		float: left;
		margin-top: 4px;
		margin-right: 6px;
	}
	.list-title .list-title-right {
		flex: 1;
		text-align: right;
	}
	.gjw-list {
		height: calc(100vh - 320px);
	}
	.gjw-list .gjw-list-list {
		height: calc(100% - 5px);
		overflow-y: auto;
		padding-top: 2px;
		background-color: #fff;
	}
	.gjw-list .gjw-list-list .gjw-list-item {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-left: 10px;
		padding-top: 5px;
	}
	.gjw-list .gjw-list-list .gjw-list-item .item {
		margin-right: 10px;
		width: calc((100% - 50px) / 5);
		height: 240px;
		border-radius: 4px;
		background: #fff;
		margin-bottom: 10px;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
	}
	.gjw-list .gjw-list-list .gjw-list-item .item .item-button {
		text-align: center;
		height: 32px;
		width: 100%;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-row {
		border-bottom: 1px solid #e0e0e0;
		height: 28px;
		line-height: 28px;
		color: #666;
		font-size: 14px;
		background-color: #f5f5fa;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-title {
		font-size: 14px;
		text-align: center;
		color: #333;
		line-height: 40px;
		height: 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		padding: 0 10px;
	}

	.gjw-list .gjw-list-list .gjw-list-item .item .item-img {
		height: 120px;
		margin: 10px;
		text-align: center;
		cursor: pointer;
	}
	.gjw-list .gjw-list-page {
		background-color: #e0e0e0;
		height: 40px;
		padding-top: 10px;
		text-align: right;
	}
	.tab-wrapper {
		display: flex; /* flex布局 */
		justify-content: flex-start; /* 左对齐 */
		flex-wrap: wrap; /* 换行 */
		padding: 20px;
		background-color: #fff;
	}

	.tab-item {
		margin-right: 20px; /* 每个元素右间距设置为20px */
		width: calc((100% - 80px) / 5);
		height: 110px;
		border-radius: 4px;
	}
	.l-img {
		width: 50%;
		float: left;
	}
	.l-border {
		border: 1px solid #fff;
		width: 66px;
		height: 54px;
		text-align: center;
		float: right;
		margin-top: 27px;
		margin-right: 20px;
		border-radius: 4px;
		padding-top: 4px;
	}
	.r-text {
		float: right;
		width: 50%;
	}
	.r-text .tab {
		font-size: 26px;
		color: #fff;
		margin-top: 25px;
	}
	.r-text .title {
		font-size: 18px;
		color: #fff;
		margin-top: 6px;
	}
	.zero {
		background-color: #49a0ff;
	}
	.one {
		background-color: #a6a0f5;
	}
	.two {
		background-color: #58b5ff;
	}
	.three {
		background-color: #4ec8d1;
	}
	.four {
		background-color: #fbac69;
	}
	.tab-item:nth-of-type(5n + 0) {
		margin-right: 0;
	}
	.noData {
		text-align: center;
		color: #999;
		height: calc(100% - 105px);
		padding-top: 102px;
		background-color: #fff;
	}
</style>
